<template>
  <cusDialog :title="title" headCss="float:left;" ref="dialogRef" width="400px" @hideHandler="hideHandler"
    @confrim="confrimHandler">
    <el-upload ref="uploadRef" action="" drag
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :limit="1"
      :auto-upload="false" :file-list="importData.fileList" :on-change="handleFileChange" :on-exceed="handleFileExceed">
      <el-icon class="el-icon--upload">
        <i-ep-upload-filled />
      </el-icon>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <template #tip>
        <div>xls/xlsx files</div>
      </template>
    </el-upload>
  </cusDialog>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '导入'

  }
})
const dialogRef = ref(null);
const show = () => {
  dialogRef.value.show = true;
};

const uploadRef = ref(); // 上传组件
// 用户导入数据
const importData = reactive({
  deptId: undefined,
  file: undefined,
  fileList: [],
});

/** Excel文件 Change */
function handleFileChange(file: any) {
  importData.file = file.raw;
}

/** Excel文件 Exceed  */
function handleFileExceed(files: any) {
  uploadRef.value!.clearFiles();
  const file = files[0];
  uploadRef.value!.handleStart(file);
  importData.file = file;
}

const hideHandler = () => {
  dialogRef.value.show = false
  importData.file = undefined;
  importData.fileList = [];
}

const emits = defineEmits<{
  (event: 'importHandler', data: File): void;
}>()

const confrimHandler = () => {
  console.log(importData)
  if (!importData.file) {
    ElMessage.info('请先选择文件')
    return false
  }
  emits('importHandler', importData.file)
}

defineExpose({ show, hideHandler })

</script>
